<template>
  <u-mask class="mask" :zoom="false" :show="isShow" :custom-style="{ height: tools.clientTopHight(), bottom: 0, top: 'auto' }" @click="closeMask">
    <scroll-view class="scroll" scroll-y @click.stop>
      <view class="content">
        <view class="header">
          签到码
          <image class="close" src="/pagesA/static/image/28.png" @click="isShow = !isShow"></image>
        </view>
        <view class="form flex-direction-column">
          <view class="item" v-for="item in props.info.user" :key="item.mobile">{{ item.name }} {{ item.mobile }}</view>
          <image src="/pagesA/static/image/29.png"></image>
        </view>
        <view class="code flex-center" :style="props.info.checked == 1 ? 'border: 2px solid #DFBD96;' : 'border: 2px solid #86CD1A;'">
          <image :src="props.info.qrcode"></image>
        </view>
        <view class="no">{{ props.info.code }}</view>
        <view class="status flex-center">
          <image v-if="props.info.checked == 1" src="/pagesA/static/image/30.png"></image>
          <image v-else src="/pagesA/static/image/31.png"></image>
          <text :style="props.info.checked == 1 ? 'color: #e6425e;' : 'color:#6FBA2C'">{{ props.info.checked == 1 ? '未核销' : '已核销' }}</text>
        </view>
        <view class="btn" @click="tools.downImage(props.info.qrcode)">保存签到码</view>
      </view>
    </scroll-view>
  </u-mask>
</template>

<script setup lang="ts">
import { ref, watch, PropType } from 'vue'
import tools from '@/utils/tools'
const emit = defineEmits(['close'])

interface Info {
  user: { mobile: string; name: string }[]
  qrcode: string
  code: string
  checked: number
}

const props = defineProps({
  isShow: {
    type: Boolean,
    default() {
      return false
    }
  },
  info: {
    type: Object as PropType<Info>
  }
})

let isShow = ref(false)

watch(
  () => props.isShow,
  (val) => {
    isShow.value = val
  }
)

const closeMask = () => {
  isShow.value = false
  emit('close', false)
}

defineExpose({
  isShow
})
</script>

<style lang="scss" scoped>
.scroll {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 612rpx;
  margin: auto;
  max-height: 845rpx;
  position: absolute;
  background-color: #fff;
}
.content {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  display: inline-block;
}
.header {
  width: 100%;
  height: 76rpx;
  color: #333333;
  font-size: 32rpx;
  line-height: 76rpx;
  position: relative;
  text-align: center;
  background-color: #eeeeee;
  border-radius: 10rpx 10rpx 0px 0px;
  .close {
    top: 38rpx;
    right: 38rpx;
    width: 20rpx;
    height: 20rpx;
    position: absolute;
  }
}
.form {
  width: 100%;
  padding: 30rpx 0;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px dashed #eee;
  .item {
    height: 44rpx;
    color: #333333;
    font-size: 32rpx;
    line-height: 44rpx;
  }
  image {
    left: 0;
    top: 28rpx;
    width: 112rpx;
    height: 46rpx;
    position: absolute;
  }
}
.code {
  width: 400rpx;
  height: 400rpx;
  margin: 52rpx auto 0 auto;
  image {
    width: 95%;
    height: 95%;
  }
}
.no {
  height: 50rpx;
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 12rpx;
  text-align: center;
  line-height: 50rpx;
}
.status {
  margin: 6rpx 0 0 0;
  image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    margin-top: 5rpx;
  }
  text {
    font-size: 28rpx;
  }
}
.btn {
  width: 100%;
  height: 68rpx;
  color: #4786e9;
  font-size: 28rpx;
  margin-top: 34rpx;
  text-align: center;
  line-height: 68rpx;
  background: #fcfcfc;
}
</style>
